<template>
  <el-main class="main-page">
    <!-- 页面名称|刷新 -->
    <div v-if="currentNav" class="slot-main-title">
      <span style="font-size:blod" v-text="$options.filters.titleFilter(currentNav)"></span>
      <el-button
        v-if="$route.name !=='conversation' && freshMap.indexOf(currentNav) >= 0"
        type="success"
        size="small"
        style="padding:5px;margin-left:10px;"
        :disabled="!canRefresh"
        :loading="!canRefresh"
        @click="refresh(currentWechats)"
      >
        <span v-if="canRefresh" class="el-icon-refresh"></span>
        <span v-if="canRefresh">{{refreshMap[currentNav]}}</span>
        <span v-else>{{timeOut}}秒后再试</span>
      </el-button>
    </div>
    <!-- 微信列表 -->
    <wechats-list
      v-if="currentNav && $route.name !=='groupAssistant' && currentNavMap.indexOf(currentNav) < 0 "
    ></wechats-list>
    <!-- 主页面 -->
    <router-view class="nav-page" name="main"></router-view>
  </el-main>
</template>

<script>
import WechatsList from "./WechatsList.vue";

export default {
  name: "MainPage",
  data() {
    return {
      currentWechats: {},
      canRefresh: true,
      timeOut: 3,
      freshMap: ["circleMy", "groupLog", "newFriend", "qrCode", "circleLog"],
      currentNavMap: [
        "moreTools",
        "takeLabels",
        "friendsFilter",
        "addFriendAuto",
      ],
      refreshMap: {
        circleMy: "刷新朋友圈",
        circleLog: "查看定时任务日志",
        groupLog: "刷新定时任务日志",
        newFriend: "刷新好友申请",
        qrCode: "刷新二维码",
      },
    };
  },
  computed: {
    currentNav() {
      let nav = this.$store.getters["currentNavs"][this.$route.name];
      return nav;
    },
  },
  components: {
    WechatsList,
  },
  methods: {
    refresh() {
      let nav = this.currentNav;
      let wechatId = this.$store.getters["currentWechats"][nav];
      let navMap = ["newFriend", "qrCode", "circleMy"];
      if (navMap.indexOf(nav) >= 0 && !wechatId) {
        this.$message.warning("请先选中微信");
        return;
      }
      switch (nav) {
        case "newFriend":
          this.$store.dispatch("websocket/PullFriendAddReqListTask", wechatId);
          this.$message.success("刷新新的朋友列表");
          break;
        case "qrCode":
          this.$store.dispatch("websocket/PullWeChatQrCodeTask", wechatId);
          this.$message.success("刷新二维码");
          break;
        case "circleMy":
          this.$store.dispatch("websocket/PullFriendCircleTask", {
            wechatId: wechatId,
            friendId: wechatId,
          });
          this.$message.success("刷新朋友圈");
          break;
        case "groupLog":
          this.$store.dispatch("websocket/GetTaskInfoList", {});
          break;
        case "circleLog":
          this.$store.commit("SET_TASK_TIME_DIALOG_CIRLCE", true);
          this.$store.dispatch("websocket/GetTaskInfoList", { tasktype: 2 });
          break;
        default:
          this.$message.info("该页面无须刷新!");
          break;
      }

      // 倒计时
      this.canRefresh = false;
      let timer = setInterval(() => {
        this.timeOut--;
      }, 1000);
      setTimeout(() => {
        this.canRefresh = true;
        clearInterval(timer);
        this.timeOut = 3;
      }, 3000);
    },
  },
};
</script>

<style lang="scss" scoped>
.main-page {
  margin: 2px 0 0px 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .slot-main-title,
  .slot-main-bottom {
    height: 40px;
    width: 100%;
    min-height: 40px;
    background-color: $bg-color-nav-title-2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-page {
    flex: 1 1 auto;
    overflow: auto;
  }
}
</style>
